<template>
	<view class="container">
		<!-- Custom Header (Non-Homepage, Logged-in State) -->
		<custom-header :isHomepage="false"></custom-header>

		

		<text class="page-title">账号管理</text>

		<view class="main-content">

			<view class="account-details">
				<view class="detail-line">
					<text class="detail-label">登录用户名:</text>
					<text class="detail-value value-orange">{{ userInfo?.account || '' }}</text>
				</view>
				<view class="detail-line">
					<text class="detail-label">昵称:</text>
					<text class="detail-value">{{ userInfo?.nickname || '' }}</text>
				</view>
				<view class="detail-line">
					<text class="detail-label">手机号码:</text>
					<text class="detail-value value-orange">{{ userInfo?.mobile }}</text>
				</view>
				<view class="detail-line">
					<text class="detail-label">登陆次数:</text>
					<text class="detail-value">38 次</text> <!-- Sample data -->
				</view>
				<view class="detail-line">
					<text class="detail-label">上次登陆:</text>
					<text class="detail-value">{{ userInfo?.login_time }}</text> <!-- Sample data -->
				</view>
				<view class="detail-line">
					<text class="detail-label">注册时间:</text>
					<text class="detail-value">{{ userInfo?.create_time }}</text> <!-- Sample data -->
				</view>
				<view class="detail-line">
					<text class="detail-label">建馆数:</text>
					<text class="detail-value">{{ userInfo?.mu_total }}</text> <!-- Sample data -->
				</view>
				<view class="detail-line" style="justify-content: flex-start;">
					<text class="detail-label">用户永恒币:</text>
					<view class="detail-value value-orange">
						{{ userInfo?.user_coin }}
						<text class="detail-action action-orange" @click="goToPayInfo"> (充值永恒币)</text>
						<text class="detail-action action-gray"> (永恒币说明)</text>
					</view>
					
				</view>
			</view>

			<view class="action-buttons">
				<button class="action-button" @click="goToUserEdit">修改昵称(签名)</button>
				<button class="action-button" @click="goToUserEditPassword">修改登录密码</button>
			</view>

			<view class="hint-text">
				<text>更多管理功能请进入电脑版管理中心</text>
			</view>

		</view>

		<Footer></Footer>

	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed
	import Footer from '@/components/footer/index.vue'
	// const isLoggedIn = ref(false)
	const userInfo = ref({})
	// Ensure auth state is loaded when the page mounts (especially for H5 refresh)
	onMounted(() => {

	});

	

	const goToUserEdit = () => {
		uni.navigateTo({
			url: '/pages/graveyardManage/userInfo/edit'
		})
	}
	const goToUserEditPassword = () => {
		uni.navigateTo({
			url: '/pages/graveyardManage/userInfo/editPassword'
		})
	}
	
	// 去充值
	const goToPayInfo = () => {
		uni.navigateTo({
			url: '/pages/graveyardManage/payInfo/index'
		})
	}
	onLoad( async ()=>{
		userInfo.value = uni.getStorageSync('userInfo')
	})
	
</script>

<style scoped>
	/* Scoped styles for this page */
	/* Reusing common styles from previous pages */
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
		/* Match background color */
		padding-bottom: 40rpx;
		/* Add some padding at the bottom */
		box-sizing: border-box;
		/* Include padding in height calculation */
	}

	/* Custom Header - Styles are in CustomHeader.vue */
	/* Need padding on main content to clear fixed header */

	/* Banner Styles - Copied from previous pages */
	.banner {
		width: 100%;
		height: 300rpx;
		/* Adjust height as needed */
		position: relative;
		overflow: hidden;
	}

	.banner-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		/* Adjust padding */
		color: #fff;
		/* Text color on banner */
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
	}

	.banner-title-area {
		display: flex;
		align-items: flex-end;
	}

	.banner-main-title {
		font-size: 50rpx;
		/* Adjust font size */
		font-weight: bold;
		margin-right: 20rpx;
	}

	.banner-sub-area {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		/* Adjust font size */
	}

	.banner-url {
		font-size: 20rpx;
		/* Adjust font size */
	}

	.banner-slogan-area {
		display: flex;
		justify-content: flex-end;
		/* Align to the right */
		font-size: 36rpx;
		/* Adjust font size */
	}

	.banner-slogan {
		margin-left: 30rpx;
		/* Spacing between slogans */
		font-weight: bold;
	}

	/* Page Title */
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 40rpx;
		/* Space below banner */
		margin-bottom: 30rpx;
		/* Space above main content card */
		color: #333;
	}

	/* Main Content Area (White Card) */
	.main-content {
		background-color: #fff;
		/* White background */
		margin: 0 20rpx;
		/* Side margins */
		padding: 30rpx;
		/* Inner padding */
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		/* Subtle shadow */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* Center children horizontally */
	}

	/* Account Details Styles */
	.account-details {
		width: 100%;
		/* Take full width within the card */
		margin-bottom: 40rpx;
		/* Space below details */
		font-size: 28rpx;
		/* Base font size for details */
	}

	.detail-line {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		/* Space between lines */
		word-break: break-word;
		/* Break long text if needed */
	}

	.detail-line:last-child {
		margin-bottom: 0;
	}

	.detail-label {
		color: #333;
		margin-right: 10rpx;
		min-width: 160rpx;
		/* Give labels a minimum width for alignment */
		flex-shrink: 0;
		/* Prevent label from shrinking */
	}

	.detail-value {
		color: #555;
		flex-grow: 1;
		/* Allow value to take space */
	}

	.value-orange {
		color: #ff9800;
		/* Orange color */
		font-weight: bold;
	}

	.detail-action {
		font-size: 24rpx;
		margin-left: 10rpx;
		flex-shrink: 0;
	}

	.action-gray {
		color: #999;
		/* Gray color for action links */
	}

	.action-orange {
		color: #ff9800;
		/* Orange color for action links */
	}


	/* Action Buttons Styles - Similar to management buttons from previous page */
	.action-buttons {
		width: 100%;
		/* Take full width within the card */
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		/* Space below buttons */
	}

	.action-button {
		/* Uniapp button default styles need override */
		width: 100%;
		/* Take full width */
		height: 80rpx;
		/* Button height */
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #e0e0e0;
		/* Light gray background */
		border: none;
		/* Remove default border */
		border-radius: 8rpx;
		/* Rounded corners */
		margin: 0 0 20rpx 0;
		/* Margin between buttons */
		text-align: center;
		/* Center text */
		display: flex;
		/* Use flex to center text */
		align-items: center;
		justify-content: center;
	}

	.action-button:last-child {
		margin-bottom: 0;
		/* No bottom margin for the last button */
	}

	/* Hint Text Styles - Copied from previous page */
	.hint-text {
		/* No top margin needed here as it's below buttons which have margin-bottom */
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}


	/* QR Codes Section - Copied from previous pages */
	.qr-codes-section {
		display: flex;
		justify-content: space-around;
		padding: 40rpx 0;
		/* Vertical padding */
		margin-top: 30rpx;
		/* Space above section */
		margin-left: 20rpx;
		/* Side margins to align with card */
		margin-right: 20rpx;
	}

	.qr-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qr-image {
		width: 200rpx;
		height: 200rpx;
		/* Need actual images */
		background-color: #eee;
		/* Placeholder background */
	}

	.qr-label {
		font-size: 26rpx;
		color: #555;
		margin-top: 10rpx;
	}

	/* Footer Styles - Copied from previous pages */
	.footer {
		margin-top: 40rpx;
		padding: 40rpx 20rpx;
		background-color: #f0f0f0;
		/* Light gray background */
		text-align: center;
		margin-top: auto;
		/* Push footer to the bottom */
		box-sizing: border-box;
	}

	.footer-links {
		font-size: 26rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.footer-links text {
		margin: 0 10rpx;
	}

	.footer-copyright {
		font-size: 22rpx;
		color: #888;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.footer-copyright text {
		margin-bottom: 5rpx;
	}

	/* Padding to clear the fixed header */
	.page-content-wrapper {
		padding-top: 88rpx;
		/* Height of the fixed header */
		flex: 1;
		/* Allow content to take space */
		display: flex;
		flex-direction: column;
	}
</style>